<template>
  <div class="visualBlock" style="z-index:100">
    <div class="title-header">
      <div class="left-menu" @click="$router.history.go(-1)"><i class="iconfont icon-left"></i></div>
      <div class="title center">离开登记表</div>
    </div>
    <div class="main-scroll scrollBody" style="">
      <div v-if="!result">
        <input class="input" type="text" v-model="sfz" placeholder="请输入身份证号">
        <input type="button" value="登记离开" class="ryc_btn" @click="query()">
      </div>
      <div class="result" v-if="result">
        <h2>请再次确认</h2>
        <h3 v-if="result.persons.length > 1">如有同行人员离开，请一并勾选登记</h3>
        <table>
          <tr>
            <td colspan="3">{{result.address}}</td>
          </tr>
          <tr v-for="(it, id) in result.persons" :key="id">
            <td><input type="checkbox" name="ids" v-model="ids" :value="it.id" :disabled="sfz==it.sfz"></td>
            <td>{{it.xm}}</td>
            <td>{{it.sfz}}</td>
          </tr>
        </table>
        <input type="button" value="确认并提交" class="ryc_btn" @click="submit()">
      </div>
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker';
import { XButton, Popup, PopupPicker } from 'vux';
export default {
  name: "Add3",
  components: {
    XButton, Popup, PopupPicker, VDistpicker
  },
  data () {
    return {
      sfz: '',
      ids: [],
      result: ''
    };
  },
  methods: {
    query: function () {
      var vm = this;
      if (!vm.$util.identityCodeValid(vm.sfz)) {
        vm.$vux.toast.text('请输入合法的证件号', 'bottom');
      } else {
        vm.$vux.loading.show();
        vm.$paramPost('trip/info/detail?id=' + vm.sfz, {}, function (data) {
          vm.$vux.loading.hide();
          if (data && data.code == '200') {
            if (!data.data.tripInfo) {
              vm.$vux.toast.text('无此人记录', 'bottom');
              return;
            }
            var result = {
              address: data.data.tripInfo.houseAddress,
              persons: []
            };
            result.persons.push({
              id: data.data.tripInfo.id,
              xm: data.data.tripInfo.tenantName,
              sfz: data.data.tripInfo.tenantId
            });
            vm.ids.push(data.data.tripInfo.id);
            data.data.others && data.data.others.forEach(element => {
              result.persons.push({
                id: element.id,
                xm: element.tenantName,
                sfz: element.tenantId
              });
            });
            vm.result = result;
          } else {
            vm.$vux.toast.text(data.message, 'bottom');
          }
        }, false);
      }
    },
    submit: function () {
      var vm = this;
      if (this.ids.length) {
        vm.$vux.loading.show();
        vm.$paramPost('trip/info/delete?ids=' + vm.ids.join(','), {}, function (data) {
          vm.$vux.loading.hide();
          if (data && data.code == '200') {
            vm.result = '';
            vm.$vux.alert.show({
              title: '提示',
              content: '离开登记完成',
              onHide () {
                vm.$router.push({path: '/'});
              }
            });
          } else {
            vm.$vux.toast.text(data.message, 'bottom');
          }
        }, false);
      } else {
        vm.$vux.toast.text('请勾选人员', 'bottom');
      }
    }
  },
  mounted: function () {
  }
};
</script>

<style lang="scss" scoped>
.visualBlock {
  background: #fff;
}
.main-scroll{
  height: calc(100vh - 40px);
  margin-top: 40px;
  width: 100%;
}
.input {
  width: 90%;
  display: block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 30px auto;
}
.ryc_btn {
  width: 80%;
  background-color: orange;
  margin: 40px auto;
  display: block;
}
.result {
  h2, h3 {
    text-align: center;
    line-height: 30px;
    margin: 10px 0;
  }
}
table {
  margin: 0 auto;
  td {
    font-size: 18px;
    min-width: 40px;
  }
}
input {

    &[type=checkbox] {
      width: 18px;
      height: 18px;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      line-height: 18px;
      position: relative;
      margin: -4px 0 0;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #cdcdcd;
      }

      &:checked::before {
        content: "✓";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: #0975ca;
        font-size: 20px;
        font-weight: bold;
      }
    }
}
</style>
